<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>一本书里的大千世界</title>
	<base href='http://www.webhek.com/misc-res/creativeguidebook/'>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="如果当你翻开一本书的时候，里面飞出来一只蝙蝠，或是一条会喷火的龙，你会有什么感觉？惊奇！赞叹！目瞪口呆！我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新，越来越多的可能成为了现实。这里就是现代网页技术的典型代表。">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	
	<script type="text/javascript" src="js/jquery-1.7.2.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/categorizr.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/modernizr.custom.31293.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/ui.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/fbk.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
	</script>
</head>

<body >
<div id="content"> 
	<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a>
	<div id="playbook-environment"></div>
	<div id="page0R" class="page" style="background-image:url('images/cover_front.jpg');"></div>
	<div id="page1L" class="page border_on"><span class="left" style="background-image:url('images/page_village_left.jpg');"/></div>
	<div id="page1R" class="page border_on"><span class="right" style="background-image:url('images/page_village_right.jpg');"/></div>
	<div id="page2L" class="page border_on"><span class="left" style="background-image:url('images/page_youtube_left.jpg');"/></div>
	<div id="page2R" class="page border_on"><span class="right" style="background-image:url('images/page_youtube_right.jpg');"/></div>
	<div id="page3L" class="page border_on"><span class="left" style="background-image:url('images/page_mobile_left.jpg');"/></div>
	<div id="page3R" class="page border_on"><span class="right" style="background-image:url('images/page_mobile_right.jpg');"/></div>
	<div id="page4L" class="page border_on"><span class="left" style="background-image:url('images/page_map_left.jpg');"/></div>
	<div id="page4R" class="page border_on"><span class="right" style="background-image:url('images/page_map_right.jpg');"/> </div>
	<div id="page5L" class="page border_on"><span class="left" style="background-image:url('images/page_search_left.jpg');"/></div>
	<div id="page5R" class="page border_on"><span class="right" style="background-image:url('images/page_search_right.jpg');"/></div>
	<div id="page6L" class="page border_on"><span class="left" style="background-image:url('images/page_social_left.jpg');"/></div>
	<div id="page6R" class="page border_on"><span class="right" style="background-image:url('images/page_social_right.jpg');"/></div>
	<div id="page7L" class="page" style="background-image:url('images/cover_back.jpg');"><p>发现更多浏览器前端技术
</br></br>
		<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=6071b891d167a94217254d0d36cec8a338df210ca5831dd09950740807f5da97"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="前端联盟" title="前端联盟" style="width: 250px;height: 30px;"></a></p></div>
</div>

<div class="nav-arrow-left nav-arrow"></div>
<div class="nav-arrow-right nav-arrow"></div>

<div id="casestudy-widget-container">
	<div id="casestudy-widget-cell">
		<div id="casestudy-widget">
			<div id="casestudy-widget-wrapper">
				<h5></h5>
				<a href="#" id="casestudy-widget-close"></a>
				<div id="casestudy-widget-tabs">
					<div id="casestudy-widget-nav">
						<ul>
							<li id="nav-left" class=""><a href="#">Case Study</a></li>
							<li id="nav-right" class="casestudy-nav-inactive"><a href="#">More Information</a></li>
						</ul>
					</div>
					<div id="casestudy-widget-content">
						<div id="content-media">
							<img src="">
							<object id="ytplayerobject">
								<param id="ytmovie" name="movie" value="">
								<param name="allowScriptAccess" value="always">
								<embed id="ytplayer" src="" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="430" height="262">
							</object>
						</div>
						<div id="content-copy">
							<h4></h4>
							<p></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="controls"></div>
<!-- Fallback markup -->
<footer id="fallback">
	<div id="fallback-container">
		<div class="fallback-top">
			<div class="fallback-header"></div>
			<p></p>
		</div>
		<div class="fallback-mid"></div>
		<div class="fallback-bottom">
			<div id="fallback-buttons">
				<a class="link-pdf" href="./" target="_blank"><button type="button" class="download-content">继续进入</button></a>
				<a href="http://www.webhek.com/" target="_top"><button type="button">返回首页</button></a>
			</div>
		</div>
	</div>
</footer>
<script type="text/javascript">
		flipbook.init();
</script>
<!-- End Fallback markup -->
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=cac4d2da-c020-435c-9749-fc0f9e51768c&style=5&fs=2&bgcolor=#F89C2F"></script>

<a style='display:none' href='http://www.webhek.com'>webhek</a> <script src='/misc-res/js/ga.js'></script><script>var shares_wb = 75;</script><script src='http://www.webhek.com/wordpress/wp-content/themes/webhek2/js/wb.js'></script>
</body>
</html>
